<template>
  <div class="bg-white rounded-lg shadow p-4 lg:p-6">
    <div class="flex justify-between items-center mb-4">
      <h2 class="text-xl font-semibold text-gray-700">合作伙伴</h2>
      <button @click="addPartner" class="text-sm text-indigo-600 hover:text-indigo-800 flex items-center">
        添加伙伴
      </button>
    </div>

    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <!-- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">名称
            </th> -->
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Logo
            </th>
            <!-- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">网址
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">合作日期
            </th> -->
            <!-- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态
            </th> -->
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作
            </th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          <tr v-for="(partner, index) in modelValue" :key="index">
            <!-- <td class="px-6 py-4 whitespace-nowrap">
              <input v-model="partner.name" type="text"
                class="w-full px-2 py-1 border-b border-transparent focus:border-gray-300 focus:outline-none">
            </td> -->
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="bg-gray-100 rounded w-10 h-10 flex items-center justify-center mr-2">
                  <span class="text-gray-400 text-xs">Logo</span>
                </div>
                <input :value="partner" @input="handleInput($event, index)" type="text"
                  class="w-full px-2 py-1 text-sm border border-gray-200 rounded focus:outline-none focus:ring-1 focus:ring-indigo-500">
                <!-- 上传图片组件，不知道怎么回显，先注释了 -->
                <!-- <ImageUpload class="w-50 h-40" :uploadUrl="partner || ''"
                  @upload-success="(url) => uploaded(url, index)" :key="'PartnersSection' + index" /> -->
              </div>
            </td>
            <!-- <td class="px-6 py-4">
              <input v-model="partner.website_url" type="text" placeholder="https://"
                class="w-full px-2 py-1 border-b border-transparent focus:border-gray-300 focus:outline-none">
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <input v-model="partner.partnership_since" type="date"
                class="w-full px-2 py-1 text-sm border border-gray-200 rounded focus:outline-none focus:ring-1 focus:ring-indigo-500">
            </td> -->
            <!-- <td class="px-6 py-4 whitespace-nowrap">
              <select v-model="partner.is_active"
                class="w-full px-2 py-1 text-sm border border-gray-200 rounded focus:outline-none focus:ring-1 focus:ring-indigo-500">
                <option :value="true">激活</option>
                <option :value="false">停用</option>
              </select>
            </td> -->
            <td class="px-6 py-4 whitespace-nowrap text-sm">
              <button @click="removePartner(index)" class="text-red-600 hover:text-red-800">
                删除
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import ImageUpload from '~/components/ImageUpload.vue'
const props = defineProps<{
  modelValue: string[];
}>()


const emit = defineEmits(['update:modelValue'])

const addPartner = () => {
  const newPartners = [...props.modelValue, '']
  emit('update:modelValue', newPartners)
}

const removePartner = (index: number) => {
  const newPartners = [...props.modelValue]
  newPartners.splice(index, 1)
  emit('update:modelValue', newPartners)
}

function updatePartner(index: number, value: string) {
  const newPartners = [...props.modelValue]
  newPartners[index] = value
  emit('update:modelValue', newPartners)
}

function handleInput(event: Event, index: number) {
  const target = event.target as HTMLInputElement
  updatePartner(index, target.value)
}

function uploaded(res: any, index: number) {
  let data = res.response.data
  let url = data[0].filePath
  // 创建新数组确保响应式更新
  const updatedCases = [...props.modelValue]
  updatedCases[index] = url
  emit('update:modelValue', updatedCases)
}

</script>